<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

// 表单
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
  userName: string
  password: string
  remember: string
}

const loginForm = reactive<RuleForm>({
  userName: '',
  password: '',
  remember: '0'
})
const loading = ref(false)
// 校验
const rules = reactive<FormRules<RuleForm>>({
  userName: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { min: 5, max: 8, message: '账号长度为5-8位数字或字母', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 5, max: 8, message: '密码长度为5-8位数字或字母', trigger: 'blur' }
  ]
})

// 登录
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      userStore
        .login(loginForm)
        .then((res: any) => {
          const userStore = useUserStore()
          userStore.$patch((state) => {
            state.token
          })
          loading.value = false
          const {
            query: { redirect }
          } = route
          const path = typeof redirect === 'string' ? redirect : '/'
          router.replace(path)
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<template>
  <div class="login display-flex fd-column ai-center jc-center">
    <div class="box display-flex">
      <!-- <div class="login-left"></div> -->
      <div class="login-right">
        <h1>九五装饰后台管理系统</h1>
        <br />
        <br />
        <el-form
          ref="ruleFormRef"
          style="width: 100%"
          :model="loginForm"
          status-icon
          :rules="rules"
          size="large"
          label-width="50px"
        >
          <el-form-item label="账号" prop="userName">
            <el-input v-model="loginForm.userName" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password" />
          </el-form-item>
          <el-form-item label="">
            <el-checkbox :value="loginForm.remember" true-value="0" false-value="1" name="type">
              记住密码
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 100%"
              type="primary"
              :loading="loading"
              @click="submitForm(ruleFormRef)"
            >
              登录
            </el-button>
          </el-form-item>
          <!-- <el-form-item>
          没有账号?
          <el-button type="text" @click="router.push({ path: '/auth-register' })">去注册</el-button>
        </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  background: url('@/assets/images/loginBg.png') center center;
  background-size: 100% 100%;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  .box {
    max-width: 1000px;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 3px 15px rgb(50 50 50 / 4%);
    border-radius: 10px;
    .login-left {
      width: 450px;
      height: 450px;
      overflow: hidden;
      border-right: 1px dashed #e8e8e8;
      background: url('@/assets/images/sigin_bg.png') center bottom no-repeat #fff;
      border-radius: 10px 0px 0px 10px;
    }
    .login-right {
      width: 450px;
      height: 450px;
      background: url('@/assets/images/login_right.png') 50%;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 30px;
      border-radius: 25px;
    }
  }
}
</style>
